<template>
    <div id="settle-detail">
        <el-table :data="list" border highlight-current-row size="small" class="mg-b">
            <el-table-column label='景区名称' prop="scenicName"></el-table-column>
            <el-table-column label="入园次数" align="center" prop="entryNum" width="100"></el-table-column>
            <el-table-column label="积分" align="center" prop="integral" width="100"></el-table-column>
            <el-table-column label="应结算价（元）" align="center" prop="amount"></el-table-column>
            <el-table-column label="保底价（元）" align="center" prop="baseAmount"></el-table-column>
            <el-table-column label="保底价-应结算价（元）" align="center" prop="diffAmount"></el-table-column>
        </el-table>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="未到期" name="first">
                <el-table :data="detailList2" v-loading.body="listLoading2" element-loading-text="Loading" border highlight-current-row size="small">
                    <el-table-column label='会员ID' min-width="150" prop="ecardCode"></el-table-column>
                    <el-table-column label="入园时间" min-width="100" align="center" prop="recordTimeStr"></el-table-column>
                    <el-table-column label="积分" min-width="120" align="center" prop="integral"></el-table-column>
                    <el-table-column label="价格（元）" min-width="130" align="center" prop="price"></el-table-column>
                    <el-table-column label="应结算价（元）" min-width="130" align="center" prop="amount"></el-table-column>
                    <el-table-column label="保底价（元）" min-width="130" align="center" prop="basePrice"></el-table-column>
                    <el-table-column label="保底价-应结算价（元）" min-width="130" align="center" prop="diffAmount"></el-table-column>
                </el-table>
                <el-pagination
                        layout="total, prev, pager, next, jumper"
                        :total="total2"
                        :page-size="pageSize2"
                        :current-page="currentPage2"
                        @current-change="handleChangePage2">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="已到期" name="second">
                <el-table :data="detailList1" v-loading.body="listLoading1" element-loading-text="Loading" border highlight-current-row size="small">
                    <el-table-column label='会员ID' min-width="150" prop="ecardCode"></el-table-column>
                    <el-table-column label="入园时间" min-width="100" align="center" prop="recordTimeStr"></el-table-column>
                    <el-table-column label="积分" min-width="120" align="center" prop="integral"></el-table-column>
                    <el-table-column label="价格（元）" min-width="130" align="center" prop="price"></el-table-column>
                    <el-table-column label="应结算价（元）" min-width="130" align="center" prop="amount"></el-table-column>
                    <el-table-column label="保底价（元）" min-width="130" align="center" prop="basePrice"></el-table-column>
                    <el-table-column label="保底价-应结算价（元）" min-width="130" align="center" prop="diffAmount"></el-table-column>
                </el-table>
                <el-pagination
                        layout="total, prev, pager, next, jumper"
                        :total="total1"
                        :page-size="pageSize1"
                        :current-page="currentPage1"
                        @current-change="handleChangePage1">
                </el-pagination>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
	import { getSettledReportDetail } from '@/api/settleAccountReport'
	export default {
		data() {
			return {
				activeName: 'first',
				listLoading: false,
                list: [],
				detailList1: [],
				detailList2: [],
                status: 1, // 已到期0，未到期1
				total1: null,
				currentPage1: 1,
				pageSize1: 20,
				total2: null,
				currentPage2: 1,
				pageSize2: 20,
				listLoading1: false,
				listLoading2: false,
                pageNumber: 1,
                pageSize: 20
			}
		},
        created() {
			let data = JSON.parse(window.sessionStorage.getItem('listRowData'))
            let tmpArray = []
	        tmpArray.push(data)
	        this.list = tmpArray
	        this.getSettledReportDetail()
        },
		methods: {
			handleClick() {
                if (this.activeName == 'first') {
                	// 未到期
					this.status = 1
	                this.listLoading2 = true
                    this.pageNumber = this.currentPage2
                    this.pageSize = this.pageSize2
                } else {
                	// 已到期
					this.status = 0
	                this.listLoading1 = true
	                this.pageNumber = this.currentPage1
	                this.pageSize = this.pageSize1
                }
				this.getSettledReportDetail()
			},
			getSettledReportDetail() {
                let params = {
	                scenicId: this.$route.query.scenicId,
                    status: this.status,
	                pageNumber: this.pageNumber,
                    pageSize: this.pageSize
                }
				getSettledReportDetail(params).then(res => {
					let data = res.data
					this.listLoading = false
					if (data.errorCode === 'E_000') {
						if (this.status == 0) { // 已到期
							this.detailList1 = data.body.list
							this.total1 = data.body.total
							this.listLoading1 = false
                        } else if (this.status == 1) { // 未到期
							this.detailList2 = data.body.list
							this.total2 = data.body.total
							this.listLoading2 = false
                        }
					}
				}).catch(() => {
					this.listLoading1 = false
					this.listLoading2 = false
				})
            },
			handleChangePage1(val) {
				this.pageNumber = val
				this.getSettledReportDetail()
			},
			handleChangePage2(val) {
				this.pageNumber = val
				this.getSettledReportDetail()
			}
		}
	}
</script>
<style lang="scss">
    #settle-detail{
        .mg-b{
            margin-bottom: 40px;
        }
    }
</style>